{% extends 'layout.html' %}

{% block title %}
    <title>主页</title>
{% endblock %}


{% block base %}
    <style>
        #pageNav {
            text-align: center;
        }

        #btns {
            padding-left: 185px;
            box-sizing: border-box;
            padding-bottom: 15px;
        }
    </style>
{% endblock %}


{% block content %}
    <div id="btns">
        <a href="/app02/toadd">
            <button type="button" class="btn btn-primary">新增</button>
        </a>
        <button type="button" class="btn btn-danger">批量删除</button>
    </div>
    <div id="table" class="container">
        <table class="table table-hover  table-bordered">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            {% for user in users %}
                <tr>
                    <td>{{ user.id }}</td>
                    <td>{{ user.username}}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.age }}</td>
                    <td>
                        <a href="/app02/toedit">
                            <button type="button" class="btn btn-primary">编辑</button>
                        </a>
                        <button type="button" class="btn btn-danger">删除</button>
                    </td>
                </tr>
            {% endfor %}
            {% if not users %}
                <tr>
                    <td colspan="5">没有数据,请添加</td>
                </tr>
            {% endif %}

        </table>
    </div>
    {% if users %}
        <div id="pageNav">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    {% endif %}
{% endblock %}



